<template>  
    <div>  
      <el-button type="primary" @click="openDialog">打开对1111111话框</el-button>  
      <DialogCommon v-model:visible="dialogVisible" title="操作" @cancel="onCancel" @submit="onSubmit">  
        <template #content>  
          <el-form :model="form" label-width="auto"  style="width:80%;">
              <el-form-item label="公告内容:">
                <el-input v-model="form.name" />
              </el-form-item>
              <el-form-item label="发布日期">
                <el-date-picker
                  style="width: 100%"
                  v-model="form.value1"
                  type="date"
                  format="YYYY/MM/DD"
                  placeholder="请输入日期"
                  @change="handleChange"
                />
            </el-form-item>
            <el-form-item class="select-clearn" label="性别" prop="sex">
            <el-select  v-model="form.sex" placeholder="请选择">
              <el-option label="男" value="1" />
              <el-option label="女" value="0" />
            </el-select>
          </el-form-item>
          </el-form>
        </template>  
      </DialogCommon>  
    </div>  
  </template>  
  
  <script setup>  
  import { ref,reactive } from 'vue';  
  import DialogCommon from './DialogCommon.vue'; // 确保路径正确  
  
  // 定义状态和方法  
  const dialogVisible = ref(false); // 初始值为 false  
  const userInput = ref('');  
  
  const openDialog = () => {  
    dialogVisible.value = true; // 打开对话框  
  };  
  
  const onCancel = () => {  
    console.log('用户取消了');  
  };  
  
  const onSubmit = () => {  

    console.log('用户提交了: ', form);  
    // 这里可以进行你所需要的提交操作  
  };  

  const form = reactive({})
  const formatDate = (date) => {
  if (!date) return '';
  return new Date(date).toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    // hour: '2-digit',
    // minute: '2-digit',
    // second: '2-digit',
    // timeZoneName: 'short',
  });
};
const handleChange = (str) => {
  console.log('handleChange',formatDate(str));
  form.value1 = formatDate(str)
}

  </script>  
  
  <style scoped>  
  /* 你可以添加样式适应你的界面 */  
  </style>